import React,{Fragment,useState} from 'react'
import Head from 'next/head'
import { Row,Col, Breadcrumb,Affix, Avatar } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import '../public/style/index.less'
import Footer from '../components/Footer'
import marked from 'marked'
import hljs from 'highlight.js'
import Tocify from '../components/tocify.tsx'
import { servicePath } from "../config/apiUrl"

import 'highlight.js/styles/monokai-sublime.css'
import "../public/style/pages/detail.less"
import Axios from 'axios';

const BreadcrumbItem = Breadcrumb.Item;


const Article = (props) => {

  const tocify = new Tocify()
  const renderer = new marked.Renderer();
  renderer.heading = function(text, level, raw) {
    const anchor = tocify.add(text, level);
    return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
  };
  marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code) {
      return hljs.highlightAuto(code).value;
    }
  }); 
  let html = marked(props.article_content) 
  
  return (<Fragment>
    <Head>
      <title>article</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Header/>
    <Row className="comm-main" type="flex" justify="center" >
        <Col className="comm-left" xs={23} sm={23} md={18} lg={14} xl={13} >
         <div>
            <div className="bread-div">
                <Breadcrumb>
                    <BreadcrumbItem><a href="/">首页</a></BreadcrumbItem>
                    <BreadcrumbItem><a href="/list">列表</a></BreadcrumbItem>
                    <BreadcrumbItem><a href="#">详情</a></BreadcrumbItem>
                </Breadcrumb>
            </div>
            <div className="detailed-content"
                dangerouslySetInnerHTML = {{__html:html}}
            >
            </div>
          </div>
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={5} lg={4} xl={5} >
          <Author/>
          <Advert/>
          <Affix offsetTop={10}>
            {/* <div className="detailed-nav article-div">
                    <div className="nav-title">文章目录</div>
                    <div className="toc-list">
                      {tocify && tocify.render()}
                    </div>
            </div> */}
            <div className="detailed-nav comm-box">
              <div className="nav-title">文章目录</div>
              <div className="toc-list">
                {tocify && tocify.render()}
              </div>
            </div>
          </Affix>
        </Col>
    </Row>
    <Footer/>
  </Fragment>)
}
Article.getInitialProps = async (context)=>{
  let id = context.query.id
  const promise = new Promise((resolve)=>{
    Axios(servicePath.getArticleById+id).then(res=>{
      resolve(res.data.data[0])
    })
  })
  return await promise
}

export default Article
